<template>
	<view class="pages-work-order-search">
		<view class="header" id="header">
			<custom-page-search-input v-model="queryData.keywords" @filter="onFilter" @search="onSearch"
				placeholder="搜索故障描述，报修电话/人"></custom-page-search-input>
		</view>
		<view class="body">
			<mescroll-uni :height="bodyHeight+'rpx'" @init="mescrollInit" :down="downOption" @down="downCallback"
				@up="upCallback">
				<template v-for="(item,index) in dataList" :key="index">
					<custom-work-order-state-wrapper-card :state="item.degree"
						v-if="item.degree == 1 || item.degree ==2" class="m-t-32">
						<custom-work-order-card @click="onCard(item,'orderSearch')" :itemData="item">
							<template #footer>

								<view class="button-wrapper">
									<!-- 工单查询    我报修||我所在科室 -->
									<!-- // 催单 终止 -->
									<template v-for="subItem in orderSearchButton[item.currState]">
										<!-- 	{{item.currState}}
										{{subItem.where['orderSearch']}} -->
										<fui-button @click="onButton(item,subItem)" btnSize="mini"
											:background="subItem.background" :color="subItem.color" class="btn"
											v-if="(item.createUser &&  subItem.where['orderSearch'] && subItem.where['orderSearch'].createUser == item.createUser) || (item.deptId && subItem.where['orderSearch'] &&subItem.where['orderSearch'].dept  && item.deptId== subItem.where['orderSearch'].dept)">

											{{subItem.label}}
										</fui-button>

									</template>
								</view>

							</template>
						</custom-work-order-card>
					</custom-work-order-state-wrapper-card>

					<custom-work-order-card v-else @click="onCard(item,'orderSearch')" :itemData="item" class="m-t-32">
						<template #footer>

							<view class="button-wrapper">
								<template v-for="subItem in orderSearchButton[item.currState]">

									<fui-button @click="onButton(item,subItem)" btnSize="mini"
										:background="subItem.background" :color="subItem.color" class="btn"
										v-if="(item.createUser &&  subItem.where['orderSearch'] && subItem.where['orderSearch'].createUser == item.createUser) || (item.deptId&& subItem.where['orderSearch'] &&   subItem.where['orderSearch'].dept  && item.deptId== subItem.where['orderSearch'].dept)">

										{{subItem.label}}
									</fui-button>


								</template>
							</view>

						</template>
					</custom-work-order-card>
				</template>


			</mescroll-uni>

		</view>
	</view>

</template>

<script>
	import {
		defineComponent
	} from "vue"
	import {
		SubPages
	} from '../../config/router-config'
	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	const {
		mescrollInit,
		downCallback,
		getMescroll,
	} = useMescroll(onPageScroll, onReachBottom)
	import {
		mapWritableState,
		mapState,
		mapGetters,
		mapActions
	} from 'pinia'
	import {
		useWorkOrderSearh
	} from "../../store/modules/worderSerach"
	import {
		WorkOrderSearchApi
	} from "../../api/workOrder"
	import {
		queryParams
	} from "../../uni_modules/uv-ui-tools/libs/function";
	import _ from 'lodash'
	import {
		getElHeightRpx
	} from "../../utils/util";
	import {
		useSyStemStore
	} from "../../store/modules/system";
	import {
		useHandleWorkOrder
	} from "../../store/modules/handleWorkOrder";
	export default defineComponent({
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				mescroll: null,
				bodyHeight: 0,

			}
		},
		computed: {
			...mapState(useSyStemStore, ['viewHeight']),
			...mapGetters(useHandleWorkOrder, ['orderSearchButton']),
			...mapWritableState(useWorkOrderSearh, ['queryData']),




		},
		onReady() {
			this.styleInit()
		},
		onLoad() {},
		methods: {
			...mapActions(useHandleWorkOrder, ['onButton', 'setMescroll', 'onCard']),
			// 初始化样式
			styleInit() {
				const the = this
				getElHeightRpx('#header', (height) => {
					this.bodyHeight = the.viewHeight - height

				})
			},
			onSearch: _.debounce(function() {
				this.mescroll.resetUpScroll()
			}, 500),
			// 点击卡片
			// onCard(item) {
			// 	console.log(item);
			// 	const params = {
			// 		orderNum: item.orderNum,
			// 		orderState: item.currState
			// 	}
			// 	wx.navigateTo({
			// 		url: `${SubPages.WORK_ORDER_DETAIL.router}?${queryParams(params)}`
			// 	})
			// },
			async downCallback(mescroll) {
				this.mescroll.resetUpScroll()
			},

			onFilter() {
				uni.navigateTo({
					url: SubPages.WORK_ORDER_SEARCH_FILTER.router
				})
			},
			/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
			async upCallback(mescroll) {
				try {
					if (!this.mescroll) {
						this.mescroll = mescroll
						this.setMescroll(mescroll)
					}
					this.queryData.pageNum = mescroll.num;
					this.queryData.pageSize = mescroll.size
					const res = await WorkOrderSearchApi.getList(this.queryData)
					if (mescroll.num == 1) {
						this.dataList = []; // 第一页需手动制空列表
					}
					const curPageData = res.data.rows || []
					this.dataList = this.dataList.concat(res.data.rows)
					mescroll.endBySize(curPageData.length, res.data.total); //必传参数(当前页的数据个数, 总数据量)
				} catch (err) {
					console.error(err);
					mescroll.endErr()
				}

			},
			onFilter() {
				uni.navigateTo({
					url: SubPages.WORK_ORDER_SEARCH_FILTER.router
				})
			}
		}
	})
</script>

<style lang="scss" scoped>
	.btn {
		&+& {
			margin-left: 16rpx !important;
		}
	}

	.button-wrapper {
		margin-top: 48rpx;
		display: flex;
		justify-content: flex-end;
	}

	.pages {
		&-work {
			&-order {
				&-search {
					background-color: #f0f2f5;
					display: flex;
					flex-direction: column;

					.header {
						// margin-bottom: 32rpx;
						background-color: #fff;
						z-index: 99;
					}

					.body {
						flex: 1;
						padding: 0 32rpx;
						// overflow: auto;
					}
				}
			}
		}
	}
</style>